// 主题配置文件
export interface ThemeColors {
    name: string
    primary: string
    primaryLight: string
    primaryDark: string
    success: string
    warning: string
    danger: string
    info: string
    text: {
        primary: string
        regular: string
        secondary: string
        placeholder: string
        disabled: string
    }
    background: {
        page: string
        card: string
        overlay: string
    }
    border: {
        base: string
        light: string
        lighter: string
        extraLight: string
    }
    fill: {
        base: string
        light: string
        lighter: string
        extraLight: string
    }
    menu: {
        background: string
        textColor: string
        hoverBackground: string
        activeColor: string
        activeBg: string
    }
    header: {
        background: string
        textColor: string
        borderColor: string
    }
    sidebar: {
        background: string
        textColor: string
        hoverBackground: string
    }
}

export interface ThemeConfig {
    default: ThemeColors
    light: ThemeColors
    dark: ThemeColors
    [key: string]: ThemeColors
}

// 主题配置
export const themeConfig: ThemeConfig = {
    default: {
        name: '默认主题',
        primary: '#409EFF',
        primaryLight: '#79bbff',
        primaryDark: '#3375b9',
        success: '#67C23A',
        warning: '#E6A23C',
        danger: '#F56C6C',
        info: '#909399',
        text: {
            primary: '#303133',
            regular: '#606266',
            secondary: '#909399',
            placeholder: '#A8ABB2',
            disabled: '#C0C4CC'
        },
        background: {
            page: '#f5f7fa',
            card: '#ffffff',
            overlay: 'rgba(255, 255, 255, 0.8)'
        },
        border: {
            base: '#DCDFE6',
            light: '#E4E7ED',
            lighter: '#EBEEF5',
            extraLight: '#F2F6FC'
        },
        fill: {
            base: '#F0F2F5',
            light: '#F5F7FA',
            lighter: '#FAFAFA',
            extraLight: '#FAFCFF'
        },
        menu: {
            background: '#ffffff',
            textColor: '#303133',
            hoverBackground: '#f5f7fa',
            activeColor: '#409EFF',
            activeBg: '#ecf5ff'
        },
        header: {
            background: '#ffffff',
            textColor: '#303133',
            borderColor: '#e4e7ed'
        },
        sidebar: {
            background: '#ffffff',
            textColor: '#303133',
            hoverBackground: '#f5f7fa'
        }
    },

    light: {
        name: '浅色主题',
        primary: '#409EFF',
        primaryLight: '#79bbff',
        primaryDark: '#3375b9',
        success: '#67C23A',
        warning: '#E6A23C',
        danger: '#F56C6C',
        info: '#909399',
        text: {
            primary: '#303133',
            regular: '#606266',
            secondary: '#909399',
            placeholder: '#A8ABB2',
            disabled: '#C0C4CC'
        },
        background: {
            page: '#fafafa',
            card: '#ffffff',
            overlay: 'rgba(255, 255, 255, 0.9)'
        },
        border: {
            base: '#DCDFE6',
            light: '#E4E7ED',
            lighter: '#EBEEF5',
            extraLight: '#F2F6FC'
        },
        fill: {
            base: '#F0F2F5',
            light: '#F5F7FA',
            lighter: '#FAFAFA',
            extraLight: '#FAFCFF'
        },
        menu: {
            background: '#ffffff',
            textColor: '#303133',
            hoverBackground: '#f0f0f0',
            activeColor: '#409EFF',
            activeBg: '#e6f7ff'
        },
        header: {
            background: '#ffffff',
            textColor: '#303133',
            borderColor: '#e4e7ed'
        },
        sidebar: {
            background: '#ffffff',
            textColor: '#303133',
            hoverBackground: '#f0f0f0'
        }
    },

    dark: {
        name: '暗色主题',
        primary: '#409EFF',
        primaryLight: '#79bbff',
        primaryDark: '#3375b9',
        success: '#67C23A',
        warning: '#E6A23C',
        danger: '#F56C6C',
        info: '#909399',
        text: {
            primary: '#E4E7ED',
            regular: '#CFD3DC',
            secondary: '#A3A6AD',
            placeholder: '#8D9095',
            disabled: '#6C6E72'
        },
        background: {
            page: '#0a0a0a',
            card: '#141414',
            overlay: 'rgba(20, 20, 20, 0.8)'
        },
        border: {
            base: '#4C4D4F',
            light: '#414243',
            lighter: '#363637',
            extraLight: '#2B2B2C'
        },
        fill: {
            base: '#303133',
            light: '#262727',
            lighter: '#1D1E1F',
            extraLight: '#191A1B'
        },
        menu: {
            background: '#141414',
            textColor: '#E4E7ED',
            hoverBackground: '#262727',
            activeColor: '#409EFF',
            activeBg: '#1e3a8a'
        },
        header: {
            background: '#141414',
            textColor: '#E4E7ED',
            borderColor: '#4C4D4F'
        },
        sidebar: {
            background: '#141414',
            textColor: '#E4E7ED',
            hoverBackground: '#262727'
        }
    }
}

// 预设主题颜色
export const presetColors = [
    { color: '#409EFF', name: 'Element Plus 蓝' },
    { color: '#67C23A', name: '成功绿' },
    { color: '#E6A23C', name: '警告黄' },
    { color: '#F56C6C', name: '危险红' },
    { color: '#909399', name: '信息灰' },
    { color: '#722ED1', name: '魅力紫' },
    { color: '#13C2C2', name: '青色' },
    { color: '#52C41A', name: '极光绿' },
    { color: '#FA8C16', name: '日暮' },
    { color: '#EB2F96', name: '明青' }
]

// 应用主题到 CSS 变量
export function applyTheme(themeName: string, primaryColor?: string) {
    const theme = themeConfig[themeName as keyof ThemeConfig]
    if (!theme) return

    const root = document.documentElement

    // 设置主题名称到 body 的 data-theme 属性
    document.body.setAttribute('data-theme', themeName)

    // 如果传入了自定义主色，覆盖主题中的主色
    const colors = primaryColor ? { ...theme, primary: primaryColor } : theme

    // 应用主题色
    root.style.setProperty('--el-color-primary', colors.primary)
    root.style.setProperty('--el-color-primary-light-3', colors.primaryLight)
    root.style.setProperty('--el-color-primary-light-5', adjustColor(colors.primary, 0.5))
    root.style.setProperty('--el-color-primary-light-7', adjustColor(colors.primary, 0.7))
    root.style.setProperty('--el-color-primary-light-8', adjustColor(colors.primary, 0.8))
    root.style.setProperty('--el-color-primary-light-9', adjustColor(colors.primary, 0.9))
    root.style.setProperty('--el-color-primary-dark-2', colors.primaryDark)

    // 应用功能色
    root.style.setProperty('--el-color-success', colors.success)
    root.style.setProperty('--el-color-warning', colors.warning)
    root.style.setProperty('--el-color-danger', colors.danger)
    root.style.setProperty('--el-color-info', colors.info)

    // 应用文字颜色
    root.style.setProperty('--el-text-color-primary', colors.text.primary)
    root.style.setProperty('--el-text-color-regular', colors.text.regular)
    root.style.setProperty('--el-text-color-secondary', colors.text.secondary)
    root.style.setProperty('--el-text-color-placeholder', colors.text.placeholder)
    root.style.setProperty('--el-text-color-disabled', colors.text.disabled)

    // 应用背景色
    root.style.setProperty('--el-bg-color', colors.background.card)
    root.style.setProperty('--el-bg-color-page', colors.background.page)
    root.style.setProperty('--el-bg-color-overlay', colors.background.overlay)

    // 应用边框色
    root.style.setProperty('--el-border-color', colors.border.base)
    root.style.setProperty('--el-border-color-light', colors.border.light)
    root.style.setProperty('--el-border-color-lighter', colors.border.lighter)
    root.style.setProperty('--el-border-color-extra-light', colors.border.extraLight)

    // 应用填充色
    root.style.setProperty('--el-fill-color', colors.fill.base)
    root.style.setProperty('--el-fill-color-light', colors.fill.light)
    root.style.setProperty('--el-fill-color-lighter', colors.fill.lighter)
    root.style.setProperty('--el-fill-color-extra-light', colors.fill.extraLight)

    // 应用自定义主题色（用于布局组件）
    root.style.setProperty('--theme-menu-bg', colors.menu.background)
    root.style.setProperty('--theme-menu-text', colors.menu.textColor)
    root.style.setProperty('--theme-menu-hover-bg', colors.menu.hoverBackground)
    root.style.setProperty('--theme-menu-active-color', colors.menu.activeColor)
    root.style.setProperty('--theme-menu-active-bg', colors.menu.activeBg)

    root.style.setProperty('--theme-header-bg', colors.header.background)
    root.style.setProperty('--theme-header-text', colors.header.textColor)
    root.style.setProperty('--theme-header-border', colors.header.borderColor)

    root.style.setProperty('--theme-sidebar-bg', colors.sidebar.background)
    root.style.setProperty('--theme-sidebar-text', colors.sidebar.textColor)
    root.style.setProperty('--theme-sidebar-hover-bg', colors.sidebar.hoverBackground)
}

// 颜色调整函数
function adjustColor(color: string, amount: number): string {
    const usePound = color[0] === '#'
    const col = usePound ? color.slice(1) : color
    const num = parseInt(col, 16)
    let r = (num >> 16) + amount * 255
    let g = (num >> 8 & 0x00FF) + amount * 255
    let b = (num & 0x0000FF) + amount * 255
    r = r > 255 ? 255 : r < 0 ? 0 : r
    g = g > 255 ? 255 : g < 0 ? 0 : g
    b = b > 255 ? 255 : b < 0 ? 0 : b
    return (usePound ? '#' : '') + (r << 16 | g << 8 | b).toString(16).padStart(6, '0')
}

// 获取当前主题
export function getCurrentTheme(): string {
    return document.body.getAttribute('data-theme') || 'default'
}

// 检查是否为暗色主题
export function isDarkTheme(): boolean {
    return getCurrentTheme() === 'dark'
}